<template>
  <div class="app-container" :class="them ? 'them-dark' : 'them-light'">
    <!-- <ThemSwitch @click.prevent="switchThem" /> -->
    <Layout>
      <template #top>
        <div>
          <SiteAsideMobile class="mobileSiteAside" />
        </div>
      </template>
      <template #left>
        <div class="aside">
          <SiteAside />
        </div>
      </template>
      <template #default>
        <RouterView />
      </template>
    </Layout>
    <ToTop />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
let them = ref(false)
const switchThem = () => {
  them.value = !them.value
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixin';
.app-container {
  user-select: none;

  &.them-light {
    color: #000000;
    @include them(#ffffff);
  }

  &.them-dark {
    color: #ffffff;
    @include them(#1b1b1b);
  }
  @include self-fill(fixed);
}

.aside {
  width: 250px;
  height: 100%;

  @media screen and (max-width: 992px) {
    display: none;
  }
}

.mobileSiteAside {
  @media screen and (min-width: 992px) {
    display: none;
  }
}
</style>
